<template>
  <h1>计算器</h1>
  <input type="text" placeholder="第一个数" v-model="num1">
  <br>
  <button @click="calc('+')">+</button>
  <button @click="calc('-')">-</button>
  <button @click="calc('*')">*</button>
  <button @click="calc('/')">/</button>
  <br>
  <input type="text" placeholder="第二个数" v-model="num2">
  <br>
  <h1> 结果为 : {{result}}</h1>
</template>

<script setup>

  import {ref} from "vue";

  const num1 = ref(0);
  const num2 = ref(0);
  const result = ref(0);

  // const calc = (o)=>{
  //   //eval("5+2"); 结果为7 将字符串形式的算式以JS的方式进行运算
  //   //将运算结果赋值给result响应式变量,再以插值的方式显示在h4中
  //   result.value = eval(a.value+o+b.value);
  // }
  const calc = (o) => {
    switch (o){
      case '+':
        result.value = parseFloat(num1.value) + parseFloat(num2.value);
        break;
      case '-':
        result.value = parseFloat(num1.value) - parseFloat(num2.value);
        break;
      case '*':
        result.value = parseFloat(num1.value) * parseFloat(num2.value);
        break;
      case '/':
        result.value = parseFloat(num1.value) / parseFloat(num2.value);
        break;
    }
  }


</script>

<style scoped>

</style>